<template>
  <div class="big">
    <div class="top">消息<span @click="contact">联系人</span></div>
    <div class="title">
      <div class="box" @click="fan">
        <!-- 粉丝 -->
        <friend_icon />
        <span>粉丝</span>
        <i class="dian" v-show="FanUnreadNum">{{ FanUnreadNum }}</i>
      </div>
      <div class="box" style="background: #f8355f;" @click="live">
        <!-- 爱心 -->
        <love_icon width="12" />
        <span>赞</span>
        <i class="dian" v-show="byLikeUnreadNum">{{ byLikeUnreadNum }}</i>
      </div>
      <div class="box" style="background: #1cc262;" @click="At">
        <div class="aite">@</div>
        <span>@我的</span>
        <i class="dian" v-show="getAtUnreadNum">{{ getAtUnreadNum }}</i>
      </div>
      <div class="box" style="background: #a753ec;" @click="pl">
        <!-- 评论 -->
        <message_icon width="20" />
        <span>评论</span>
        <i class="dian" v-show="byCommentUnreadNum">{{ byCommentUnreadNum }}</i>
      </div>
    </div>
    <img src="../assets/avatar/2.e9881162.jpg" alt="" class="img">
  </div>
</template>
<script setup>
import { ref } from 'vue'
// 爱心
import love_icon from '../components/common/icon/love-icon.vue'
// 信息
import message_icon from '../components/common/icon/message-icon.vue'
// 粉丝
import friend_icon from '../components/common/icon/friend-icon.vue'
import { useRouter } from 'vue-router'
import { getFanUnreadNumAPI, getbyLikeUnreadNumAPI, getgetAtUnreadNumAPI, getbyCommentUnreadNumAPI } from '../api/Message-page'
let router = useRouter()
// 我的id
const myId = JSON.parse(localStorage.getItem('data')).userId
// 粉丝未读数量
const FanUnreadNum = ref(0)
// 赞未读数量
const byLikeUnreadNum = ref(0)
// @未读数量
const getAtUnreadNum = ref(0)
// 评论未读数量
const byCommentUnreadNum = ref(0)
init()
async function init() {
  let Fanres = await getFanUnreadNumAPI(myId)
  let byLikeres = await getbyLikeUnreadNumAPI(myId)
  let getAtres = await getgetAtUnreadNumAPI(myId)
  let byCommentres = await getbyCommentUnreadNumAPI(myId)
  console.log(byCommentres);
  FanUnreadNum.value = Fanres.data.data
  console.log(FanUnreadNum.value, '粉丝未读数量');
  byLikeUnreadNum.value = byLikeres.data.data
  console.log(byLikeUnreadNum.value, '赞未读数量');
  getAtUnreadNum.value = getAtres.data.data
  console.log(getAtUnreadNum.value, '@未读数量');
  byCommentUnreadNum.value = byCommentres.data.data
  console.log(byCommentUnreadNum.value, '评论未读数量');
}
// 粉丝
async function fan() {
  router.push('/messagefan')
}
// 赞
async function live() {
  router.push('/messagelike')
}
// @
async function At() {
  router.push('/messageat')
}
// 评论
async function pl() {
  router.push('/messagecomment')
}
// 联系人
async function contact() {
  router.push('/contact')
}
</script>

<style lang="scss" scoped>
.big {
  font-size: 16px;
  height: 100%;
  background-color: #161622;
}

.dian {
  position: absolute;
  right: 0;
  top: 0;
  margin-top: -4px;
  margin-right: -4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #face15;
  text-align: center;
  line-height: 16px;
  color: #161622;
  font-size: 12px;
  font-weight: 600;
  font-family: "iconfont" !important;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
}

.top {
  position: relative;
  color: #fff;
  width: 100%;
  height: 44px;
  font-size: 16px;
  text-align: center;
  margin-top: 10px;

  span {
    position: absolute;
    right: 0;
    top: 0;
    margin-right: 10px;
  }
}

.title {
  height: 57px;
  width: 100%;
  display: flex;
  justify-content: space-around;

  .box {
    position: relative;
    height: 40px;
    width: 40px;
    background: #4f88fb;

    .aite {
      position: absolute;
      top: 0;
      left: 0;
      margin-left: 7px;
      margin-top: 5px;
      color: #fff;
      font-size: 24px;
    }

    span {
      width: 40px;
      position: absolute;
      bottom: 0;
      left: 0;
      margin-bottom: -20px;
      color: #e8e8e9;
      font-size: 12px;
      text-align: center;
    }
  }
}

.img {
  width: 314px;
  height: 340px;
  margin-top: 200px;
  margin-left: 40px;
}
</style>